import React, {Fragment, PureComponent,} from 'react';
import {connect} from 'dva';
import router from 'umi/router';
import {Button, Card, Col, Form, Icon, Input, Modal, Row, Select, Steps, Table} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import DirLine from "../sub/DirLine";
import styles from '../PrivateFile.less';
import DescriptionList from '@/components/DescriptionList';

const {Description} = DescriptionList;
const FormItem = Form.Item;
const {Step} = Steps;
const {TextArea} = Input;
const {Option} = Select;

/* eslint react/no-multi-comp:0 */
@connect(({groupsModel, loading}) => ({
  groupsModel,
  loading: loading.models.groupsModel,
}))


@Form.create()
class Groups extends PureComponent {
  state = {
    modalVisible: false,
    selectedRows: [],
    record: {},
    currentDirs: [{code: 'index', dirName: '我的文件库', id: ''}, {code: 'group_files', dirName: '自定义组文件'}],
  };

  showSubFiles = (row) => {
    router.push('/filecenter/group/' + row.id + '/' + row.groupName);
  }

  columns = [
    {
      title: '组名称',
      dataIndex: 'groupName',
      render: (text, row) => {
        return <Fragment>
          <Icon type="folder" theme="filled" style={{color: '#e87e04'}}/>
          &nbsp;<a onClick={() => this.showSubFiles(row)}>{text}</a>
        </Fragment>
      },
    },
  ]
  ;

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: 'groupsModel/queryGroupList',
      callback: (res) => {
        if (res.result == "ok") {
          // let groupList = res.data.dataList;
          // let allList = [];
          // // {id:1,type:'share/group',name:''}
          // allList.push({id: null, type: 'share', name: '共享文件'})
          // groupList.forEach(item => {
          //   allList.push({id: item.id, type: 'group', name: item.groupName})
          // })
          // this.setState({dataList: allList});
        } else {
          Modal.error({title: '操作失败', content: res.msg});
        }
      },
    });
  }

  renderSimpleForm() {
    const {
      form: {getFieldDecorator},
    } = this.props;

    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{md: 8, lg: 24, xl: 48}}>
          <Col md={8} sm={24}>
            <FormItem label="文件名称">
              {getFieldDecorator('name')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }
  onDirSelect = item => {
    console.error("item.code:" + item.code);
    switch (item.code) {
      case 'index':
        router.push('/filecenter/home-file');
        break;
      case 'public_files':
        router.push('/filecenter/public-file');
        break;
      case 'share_files':
      case 'sub_file':
        let currentDirs = this.state.currentDirs;
        let newDirs = [];
        for (let sub of currentDirs) {
          newDirs.push(sub);
          if (item.id == sub.id) {
            break;
          }
        }
        //更改当前的显示
        this.setState({currentDirs: newDirs});
        if (item.id) {
          //查询文件夹下的子文件
          this.querySubDirOrFileList({id: item.id});
        } else {
          this.queryShareFiles();
        }


        break;
      default:
        break;
    }

  }
  renderForm() {
    return this.renderSimpleForm();
  }

  render() {
    const {
      groupsModel: {data,},

      loading,
    } = this.props;
    const {currentDirs,} = this.state;


    return (
      <PageHeaderWrapper title="自定义组文件">
        <Card bordered={false}>
          <div className={styles.tableList}>
            {/*<div className={styles.tableListForm}>{this.renderForm()}</div>*/}
            <div style={{clear: 'both'}}></div>
            <div className={styles.filePath}>
              <DirLine dirs={currentDirs} onDirSelect={this.onDirSelect}/>
            </div>
            <Table className={styles.tdPadding} columns={this.columns} dataSource={data.dataList}/>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Groups;
